
.thumbnails-view {
	width: 100%;
	height: 100%;
	user-select: none;
	display: flex;
	flex-direction: column;

	.thumbnails-header {
		display: flex;
		position: relative;
		margin: 6px 13px;
		justify-content: space-between;
		align-items: center;
	}

	.thumbnails {
		cursor: default;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		outline: none;
		overflow: auto;
		padding: 10px 30px 0;
		user-select: none;
	}

	.thumbnail {
		display: flex;
		flex-direction: column;
		gap: $space-xs;

		.image {
			border-radius: 5px;

			img {
				border-radius: 3px;

				border: 0;
				display: block;
			}

			.placeholder {
				background-color: var(--fill-quarternary);
				border-radius: 5px;
			}

			@include pdf-page-image-dark-light;
		}

		.label {
			display: flex;
			justify-content: center;
		}

		&.selected {
			.image {
				outline: 3px solid var(--accent-blue50);
			}
		}
	}
}
